<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-affix >
         
                <el-menu
              
                    :default-active="1"
                    class="el-menu-demo"
                    mode="horizontal"
                    :ellipsis="false"
                    @select="handleSelect"
                >
                    <el-menu-item >
                        <div >
                            
                          <el-image style="width: 50px; height: 50px" :src=url />
                        </div>
                    </el-menu-item>
                  
                    <el-menu-item index="1">首页</el-menu-item>
                   
                    <el-sub-menu index="2">
                    <template #title>学习</template>
                    <el-menu-item index="2-1">文章</el-menu-item>
                    <el-menu-item index="2-2">笔记</el-menu-item>
                    <el-menu-item index="2-3">专栏</el-menu-item>               
                    </el-sub-menu>
                    <el-sub-menu index="3">
                    <template #title>团队</template>
                    <el-menu-item index="3-1">找团队</el-menu-item>
                    <el-menu-item index="3-2">创建团队</el-menu-item> 
                    <el-menu-item index="3-3">我的团队</el-menu-item>             
                    </el-sub-menu>
                    <el-menu-item index="4">摆摊</el-menu-item>
                    <div class="flex-grow" />
                    <div class="search">
                        <el-input
                        v-model="input"
                        placeholder="Please input"
                        >
                        
                        <template #append>
                            <el-button  text @click="search()">
                                <el-icon><Search /></el-icon>
                            </el-button>
                        </template>
                        </el-input>
                    </div>
                    <span class="fenxiang"><el-button type="primary" @click="toEdit"> <el-icon><Edit /></el-icon>分享</el-button></span>
                    <span>  
                      <el-popover
                      
                          placement="bottom-end"
                          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; "
                        >
                          <template #reference>
                             <el-avatar :size="50" :src="circleUrl" />
                          </template>
                          <template #default>
                                <div class="but"><a href="#"><el-icon size="20"><Message /></el-icon>:消息</a></div>
                                <div  class="but"><a href="#"><el-icon size="20"><User /></el-icon>:登录</a></div>
                                <div  class="but"><a href="#"><el-icon size="20"><UserFilled /></el-icon>:退出</a></div>
                               
                          </template>
                      </el-popover>
                    </span>
                   
                </el-menu>
            
        </el-affix>

      </el-header>
      <el-main>
            <routerView></routerView>
            <div class="the">            
                <fix></fix>
            </div>
            <el-backtop :right="70" :bottom="100" />
      </el-main>
      <el-footer>程序员摆摊--为摆烂而生</el-footer>
    </el-container>
  </div>
</template>
<script>
import fix from "../components/fix.vue"
export default{
    data(){
       return{ url:'https://cn.bing.com/images/search?view=detailV2&ccid=rvFdG7Y8&id=23F20219AB0CE7EECFF8F2C204D8F0EC25936E6C&thid=OIP.rvFdG7Y8B836IoN97EJbqQAAAA&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.aef15d1bb63c07cdfa22837dec425ba9%3frik%3dbG6TJezw2ATC8g%26riu%3dhttp%253a%252f%252fzhuanshu.shufami.com%252fdatafile%252fsbx%252fzs%252fgif%252f16%252f16hi.gif%26ehk%3dlTF5oT0d1d5PcqkNNjybv73jTIBfyE1sZPz9AAAnF0g%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=378&expw=378&q=%e7%99%bd%e5%ad%97%e5%9b%be%e7%89%87&simid=608009503773588091&FORM=IRPRST&ck=C256956F41ACD1BD36D179E704667AAD&selectedIndex=0&idpp=overlayview&ajaxhist=0&ajaxserp=0',
               input:'',
               
            }
     },
     methods:{
      //搜索方法
        search(){
          const {href} = this.$router.resolve({
            path: '/theCode/search',
            query:{
              input:this.input
            }
          });
          window.open(href, '_blank');
        
        },
        toEdit(){
          this.$router.push({
           path:'/theCode/edit'
          })
        }

     }
}
</script>
<style>
.search{
    position: relative;
    right: 50px;
    display: inline-block;
    line-height: 50px;
    margin-right: 30px;
    width: 450px;
}
.flex-grow {
  flex-grow: 1;
}
.the{
  position: fixed;
  bottom: 150px;
  right: 75px;
}
.fenxiang{
  display: inline-block;
  height: 50px;
  line-height: 50px;
  margin-right: 20px;
}
html,body{
	height: 100%;
}
.el-main {
    min-height: 650px;
    
}
.but{
  margin-left: 10px;
 font-size: 17px;
  /* width: 100px; */
}
a{color: #606266; text-decoration:none;} 
a:hover {color:#409EFF;text-decoration:none;}
</style>